import { BaseEditor } from './BaseEditor'
import { CellValue } from '../types'

export class ColorEditor extends BaseEditor {
  protected colorInput: HTMLInputElement | null = null
  
  protected createElement(value: CellValue): HTMLElement {
    const editOptions = this.getEditOptions()
    
    // 创建颜色输入框
    this.colorInput = document.createElement('input')
    this.colorInput.type = 'color'
    
    // 设置属性
    if (editOptions.readonly) {
      this.colorInput.disabled = true
    }
    
    // 设置初始值
    this.setValue(value)
    
    return this.colorInput
  }
  
  getValue(): CellValue {
    if (!this.colorInput) return null
    return this.colorInput.value
  }
  
  setValue(value: CellValue): void {
    if (!this.colorInput) return
    
    // 确保颜色值是有效的十六进制格式
    let colorValue = '#000000'
    
    if (value) {
      const strValue = String(value).trim()
      
      // 如果是有效的颜色值
      if (this.isValidColor(strValue)) {
        colorValue = this.normalizeColor(strValue)
      }
    }
    
    this.colorInput.value = colorValue
  }
  
  protected applyCustomStyles(): void {
    if (!this.colorInput) return
    
    // 颜色选择器的特殊样式
    this.colorInput.style.cssText = `
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 2px;
      background: white;
    `
  }
  
  protected attachCustomEventListeners(): void {
    if (!this.colorInput) return
    
    // 监听变化事件
    this.colorInput.addEventListener('change', this.handleInput.bind(this))
  }
  
  // 验证颜色值是否有效
  private isValidColor(color: string): boolean {
    // 支持十六进制颜色
    if (/^#[0-9A-F]{6}$/i.test(color)) {
      return true
    }
    
    // 支持短十六进制颜色
    if (/^#[0-9A-F]{3}$/i.test(color)) {
      return true
    }
    
    // 支持 RGB/RGBA
    if (/^rgba?\(/i.test(color)) {
      return true
    }
    
    // 支持 HSL/HSLA
    if (/^hsla?\(/i.test(color)) {
      return true
    }
    
    // 支持命名颜色
    const namedColors = [
      'black', 'white', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta',
      'gray', 'grey', 'orange', 'purple', 'brown', 'pink', 'lime', 'navy'
    ]
    
    return namedColors.includes(color.toLowerCase())
  }
  
  // 标准化颜色值为十六进制格式
  private normalizeColor(color: string): string {
    // 短十六进制转换为长十六进制
    if (/^#[0-9A-F]{3}$/i.test(color)) {
      const r = color[1]
      const g = color[2]
      const b = color[3]
      return `#${r}${r}${g}${g}${b}${b}`
    }
    
    // RGB/RGBA 转换为十六进制
    if (/^rgba?\(/i.test(color)) {
      const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i)
      if (match) {
        const r = parseInt(match[1]).toString(16).padStart(2, '0')
        const g = parseInt(match[2]).toString(16).padStart(2, '0')
        const b = parseInt(match[3]).toString(16).padStart(2, '0')
        return `#${r}${g}${b}`
      }
    }
    
    // 命名颜色转换为十六进制
    const colorMap: { [key: string]: string } = {
      'black': '#000000',
      'white': '#FFFFFF',
      'red': '#FF0000',
      'green': '#008000',
      'blue': '#0000FF',
      'yellow': '#FFFF00',
      'cyan': '#00FFFF',
      'magenta': '#FF00FF',
      'gray': '#808080',
      'grey': '#808080',
      'orange': '#FFA500',
      'purple': '#800080',
      'brown': '#A52A2A',
      'pink': '#FFC0CB',
      'lime': '#00FF00',
      'navy': '#000080'
    }
    
    const lowerColor = color.toLowerCase()
    if (colorMap[lowerColor]) {
      return colorMap[lowerColor]
    }
    
    // 如果已经是有效的十六进制，返回大写格式
    if (/^#[0-9A-F]{6}$/i.test(color)) {
      return color.toUpperCase()
    }
    
    // 默认返回黑色
    return '#000000'
  }
} 